import React, { Component } from "react";
import Picker from 'react-native-picker';

import { 
  Image,
  StyleSheet,
  Alert,
  Button,
  Text,
  View,
  ImageBackground,
  Dimensions,
  ScrollView,
  SafeAreaView,
  TouchableOpacity,
  NativeModules,
  
} from 'react-native';

// function Name(props) {
//     return <h1>网站名称：{props.name}</h1>;
// }
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const OpenNativeModule = NativeModules.OpenNativeModule;

export default class PageSauna extends Component {
  // static navigationOptions = ({ navigation }) => {
  //   return {
  //     title: navigation.state.params.title,
  //   };
  // };
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      tempData: [ '25', '26','27', '28','29','30', '31','32', '33','34','35', '36','37', '38','39','40'
      , '41','42', '43','44','45', '46','47', '48','49','50', '51','52', '53','54','55', '56','57', '58','59','60'],
      timeData: [
        '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', 
        '20', '21', '22', '23', '24', '25', '26','27', '28','29','30', '31','32', '33','34','35', '36','37', '38','39','40', 
        '41','42', '43','44','45', '46','47', '48','49','50', '51','52', '53','54','55', '56','57', '58','59',
        '60','61', '62','63','64', '65','66', '67','68','69', '70','71', '72','73','74', '75','76', '77','78',
        '79','80', '81','82','83', '84','85', '86','87','88', '89','90'
      ],
      
      temp: '26℃',
      time: '10min',
      state: '00', // 拿完数据要处理一下显示的状态
      switchSrc: require('../assets/switch_sauna.png'),
    }
    this.saveBt = this.saveBt.bind(this);
    this.gobackBt = this.gobackBt.bind(this);
    this.showTimePick = this.showTimePick.bind(this);
    this.showTempPick = this.showTempPick.bind(this);
    this.switchBt = this.switchBt.bind(this);
  }

  componentDidMount() {
    console.log('设备宽高')
    console.log(SCREEN_WIDTH)
    console.log(SCREEN_HEIGHT)
    
    //传值进入桑拿页面，判断开关状态
    this.state.state=this.props.navigation.state.params.steamState
   
    if(this.state.state=='00'){
      this.setState({
        switchSrc: require('../assets/switchoff_sauna.png')
      });
    } else {
      this.setState({
        switchSrc: require('../assets/switch_sauna.png')
      });
    }
    
    console.log(this.state.state);
    
  }

  

  saveBt() {
    console.log('保存用户设置')
    var dataSaunaState
   
    time = parseInt(this.state.time.substr(0,2));
    console.log(PrefixInteger(time.toString(16),2));

    temp = parseInt(this.state.temp.substr(0,2));
    console.log(PrefixInteger(temp.toString(16),2));

    if(this.state.state == '01') {
      dataSaunaState = {"data":{"deviceName":"Device_SaunaStateTimeTemp","value":this.state.state+PrefixInteger(time.toString(16),2)+PrefixInteger(temp.toString(16),2)}}
    } else {
      dataSaunaState = {"data":{"deviceName":"Device_SaunaStateTimeTemp","value":'000000'}}
    }
   
    
    OpenNativeModule.jump2Native(dataSaunaState).then((result) => {
      console.log(result);
    }).catch((error) => {
      console.log(error);
      Alert.alert(
        '提示',
        '命令发送失败！',
        [
          {text: '确认', onPress: () => console.log('OK Pressed')},
        ]
      )
    })
    // 发送指令
  
  }
  gobackBt() {
    console.log('返回主页')
    Picker.isPickerShow(status => {
      if (status) {
        Picker.hide();
      }
    });
    this.props.navigation.goBack()
    // this.props.navigation.navigate('Main')
  }
  showTimePick() {
    Picker.init({
      pickerData: this.state.timeData,
      selectedValue: ['10'],
      pickerConfirmBtnText: '确定',
      pickerCancelBtnText: '取消',
      pickerTitleText: '',
      onPickerConfirm: data => {
          console.log(data);    
            this.setState({
              time:data+'min'
            })                 
      },
      onPickerCancel: data => {
          console.log(data);
      },
      onPickerSelect: data => {
          console.log(data);
      }
    });
    Picker.show();
  }
  showTempPick() {
    Picker.init({
      pickerData: this.state.tempData,
      selectedValue: ['45'],
      pickerConfirmBtnText: '确定',
      pickerCancelBtnText: '取消',
      pickerTitleText: '',
      onPickerConfirm: data => {
          console.log(data);
          this.setState({
            temp: data[0] + '℃'
          });
      },
      onPickerCancel: data => {
          console.log(data);
      },
      onPickerSelect: data => {
          console.log(data);
      }
    });
    Picker.show();
  }
  switchBt() {
    console.log('控制开关')
    if (this.state.state == '00') {
      this.setState({
        switchSrc: require('../assets/switch_sauna.png'),
        state: '01'
      });
    } else {
      this.setState({
        switchSrc: require('../assets/switchoff_sauna.png'),
        state: '00'
      });
    }
  }

  render() {
    return (
      // <View>
      //   <Text>{this.props.navigation.state.params.title}</Text>
      //   <Text onPress={() => this.props.navigation.navigate('Main')}>点击跳转主页面</Text>
      //   <Text onPress={() => this.props.navigation.goBack()}>点击返回</Text>
      // </View>
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView contentContainerStyle={{ height: SCREEN_HEIGHT }}>
          <ImageBackground source={require('../assets/bg1.png')} style={styles.bgImage}>
            <View style={styles.header}>
              <View style={{ width: 70 }}>
                <TouchableOpacity onPress={this.gobackBt}>
                  <Image
                    source={require('../assets/icon_left.png')}
                    style={{ width:11, height:19, marginLeft:14 }}
                  />
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1, alignItems: 'center' }}>
                <Text style={{ fontSize: 20, color:'#fff' } }>桑拿设置</Text>
              </View>
              <View style={{ width: 60 }}>
                <TouchableOpacity onPress={this.saveBt} style={styles.btn}>
                  <Text style={styles.btn_text}>保存</Text>
                </TouchableOpacity>
              </View>
              <View style={{ width: 10 }}>
              </View>
            </View>
            <View style={{ marginTop: 40, alignItems: 'center' }}>
              <ImageBackground source={require('../assets/circle_sauna.png')} style={styles.circle}>
                <Text style={{ marginTop: 40, fontSize: 30, color:'#fff' } }>{this.state.time}</Text>
                <Text style={{ marginTop: 10, fontSize: 24, color:'#fff' } }>{this.state.temp}</Text>
              </ImageBackground>
            </View>
            <View style={styles.info_container}>
              <View style={{ flexDirection: 'row' }}>
                <Image
                  source={require('../assets/time_sauna.png')}
                  style={{ width: 24, height:24 }}/>
                <Text style={styles.info}>{this.state.time}</Text>
              </View>
              <View style={{ flexDirection: 'row' }}>
                <Image
                  source={require('../assets/wd_sauna.png')}
                  style={{ width: 12, height:24 }}/>
                <Text style={styles.info}>{this.state.temp}</Text>
              </View>
            </View>
            <View style={styles.text_container}>
              <View style={styles.pick}>
                <Text style={styles.txt}>时间设置</Text>
                <Text style={styles.txt} onPress={this.showTimePick}>{this.state.time}</Text>
              </View>
              <View style={styles.pick}>
                <Text style={styles.txt}>温度设置</Text>
                <Text style={styles.txt} onPress={this.showTempPick}>{this.state.temp}</Text>
              </View>
            </View>
            <View style={{ alignItems: 'center', marginTop:30 } }>
              <TouchableOpacity onPress={this.switchBt}>
                <Image
                  source={this.state.switchSrc}
                  style={{ width:100, height:100, marginTop:30 }}
                />
              </TouchableOpacity>
            </View> 
          </ImageBackground>
              {/* <View>
                <TouchableOpacity onPress={this.mainBt}>
                  <Image
                    source={this.state.mainBtnSrc}
                    style={{ width:80, height:80, marginTop:30 }}
                  />
                </TouchableOpacity>
              </View>  */}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

var styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    width: SCREEN_WIDTH,
    height: 320,
    // justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: '#F6F6F6',
  },
  top: {
    width: SCREEN_WIDTH,
    height: 320,
    backgroundColor: '#87CEFA'
  },
  header: {
    flexDirection: 'row',
    width: SCREEN_WIDTH,
    marginTop:33,
    justifyContent: 'center',
  },
  btn: {
    width: 55,
    height: 30,
    backgroundColor: '#fff',
    borderRadius: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btn_text: {
    fontSize: 16,
    color: '#1E90FF'
  },
  circle: {
    width: 142,
    height: 142,
    alignItems: 'center',
  },
  info_container: {
    marginTop: 25,
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  info: {
    fontSize: 18,
    marginLeft: 5,
    color: '#fff'
  },
  text_container: {
    marginTop: 50
  },
  pick: {
    justifyContent: 'space-around',
    flexDirection: 'row',
    marginTop:15,
    fontSize: 32
  },
  txt: {
    fontSize: 24,
    color: '#696969'
  }
});

function PrefixInteger(num, n) {
  return (Array(n).join(0) + num).slice(-n);
}